<template>
  <view class="login">
    <view class="logo">
      <image src="../../static/images/1669955077128.jpg" mode=""></image>
    </view>
    <view class="form">
      <u--form ref="uForm" errorType="border-bottom" labelPosition="left" :model="model1" :rules="rules">
        <u-form-item class="test" label="邮箱" labelWidth="auto" borderBottom prop="userInfo.email">
          <u--input v-model="model1.userInfo.email" border="none"></u--input>
          <text class="hz">@qq.com</text>
        </u-form-item>

        <u-form-item class="test" label="昵称" labelWidth="auto" borderBottom prop="userInfo.nickname">
          <u--input v-model="model1.userInfo.nickname" border="none"></u--input>
          <text class="hz" style="color: transparent;">@qq.com</text>
        </u-form-item>

        <u-form-item class="test" label="密码" labelWidth="auto" borderBottom prop="userInfo.pwd">
          <u--input v-model="model1.userInfo.pwd" border="none"></u--input>
          <text class="hz" style="color: transparent;">@qq.com</text>
        </u-form-item>

        <u-form-item class="test" label="确认密码" labelWidth="auto" borderBottom prop="userInfo.pwd2">
          <u--input v-model="model1.userInfo.pwd2" border="none"></u--input>
          <text class="hz" style="color: transparent;">@qq.com</text>
        </u-form-item>

        <!--        <u-form-item class="test" label="验证码" borderBottom labelWidth="auto" prop="userInfo.code">
          <u--input v-model="model1.userInfo.code" border="none"></u--input>
          <u-toast ref="uToast"></u-toast>
          <u-code changeText="x秒后获取" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
          </u-code>
          <u-button class="btncode" @tap="getCode">{{tips}}</u-button>
        </u-form-item> -->
      </u--form>
      <view @click="register" class="btn">
        注册
      </view>
      <text @click="gologin" class="gozc">去登录?也发金条!</text>
    </view>

  </view>
</template>

<script>
  import {
    register,
    getcode
  } from '@/api/user.js'
  export default {
    data() {
      return {
        tips: '',
        // refCode: null,
        seconds: 30,
        animation: '', //动画样式
        model1: {
          userInfo: {
            nickname: "",
            code: "",
            email: "",
            pwd2: "",
            pwd: "",
          },
        },
        rules: {
          'userInfo.nickname': {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value) {
                return true
              } else {
                uni.$u.toast('请输入注册昵称');
                return false;
              }

            },
            message: "注册昵称未输入",
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          },
          // 'userInfo.code': {
          //   message: "验证码未输入",
          //   // 自定义验证函数，见上说明
          //   validator: (rule, value, callback) => {
          //     if (value) {
          //       return true
          //     } else {
          //       uni.$u.toast('请输入验证码');
          //       return false;
          //     }

          //   },
          //   // 触发器可以同时用blur和change
          //   trigger: ['blur'],
          // },
          'userInfo.email': {
            message: "邮箱未输入",
            validator: (rule, value, callback) => {
              if (value) {
                return true
              } else {
                uni.$u.toast('请输入邮箱');
                return false;
              }

            },
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          },

          'userInfo.pwd': {
            message: "密码未输入",
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value) {
                return true
              } else {
                uni.$u.toast('请输入密码');
                return false;
              }

            },
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          },
          'userInfo.pwd2': {
            message: "确认密码与密码不一致",
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {

              if (value == this.model1.userInfo.pwd) {
                return true
              } else {
                uni.$u.toast('密码与确认密码不一致');
                return false;
              }

            },
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          },
        },
      };
    },
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      register() {
        this.$refs.uForm.validate().then(res => {
          register({
            nickname: this.model1.userInfo.nickname,
            email: this.model1.userInfo.email + '@qq.com',
            password: this.model1.userInfo.pwd,
            code: this.model1.userInfo.code
          }).then(res => {
            console.log(res);
            if (res) {

              if (res.code == 200) {
                uni.$u.toast("注册成功!");
                uni.setStorageSync('email', this.model1.userInfo.email)
                setTimeout(() => {
                  this.$Router.push('/subpkg/login/login')
                }, 1500)
              }
            }
          })
        }).catch(errors => {
          uni.$u.toast(errors[0].message)
        })
      },
      gologin() {
        this.$Router.push('/subpkg/login/login')
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          getcode({
            type: "注册验证码",
            email: this.model1.userInfo.email + '@qq.com'
          }).then(res => {
            if (res) {
              uni.hideLoading();
              // 这里此提示会被this.start()方法中的提示覆盖
              // uni.$u.toast(res.msg);
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
              uni.showToast({
                title: res.msg,
                icon: "none"
              })
            }
          })
        } else {
          uni.$u.toast('请求繁忙');
        }

      },
      end() {
        // uni.$u.toast('倒计时结束');
      },
      start() {
        // uni.$u.toast('倒计时开始');
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .u-form-item__body__left__content__label {
    color: #c00000;
  }

  /deep/ .u-line {
    // border-bottom: 2rpx solid ghostwhite !important;
    transform: none !important;
  }

  /deep/ .uni-input-input {
    color: #c00000;
  }

  /deep/ uni-button::after {
    border: none !important;
  }

  .gozc {
    display: flex;
    justify-content: flex-end;
    font-size: 22rpx;
  }

  .login {
    width: 100vw;
    height: 100vh;
    background: url('../../static/images/ttt.png') no-repeat;
    background-size: 100% 100%;

    .logo {
      display: flex;
      justify-content: center;
    }

    .hz {
      color: #c00000;
    }

    .title {
      font-size: 40rpx;
      display: flex;
      justify-content: center;
      font-weight: bold;
      margin-top: 20rpx;
      color: white;
    }

    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
      margin-top: 200rpx;
    }

    .form {
      width: 400rpx;
      height: auto;
      margin: 100rpx auto;
      display: flex;
      justify-content: center;
      color: white;
      font-weight: bold;
      flex-direction: column;
      font-size: 28rpx;
      color: #c00000;

      .btncode {
        width: 180rpx;
        border-radius: 10rpx;
        height: 50rpx;
        color: #c00000;
        background: transparent;
        font-size: 20rpx;
        border: 2rpx solid transparent !important;
      }

      .test {
        color: white !important;
        background-color: transparent;
        border-radius: 40rpx;
        box-sizing: border-box;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;
      }


      .btn {
        width: 200rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        border-radius: 10rpx;
        margin: 60rpx auto;
        font-size: 26rpx;
        text-indent: 20rpx;
        letter-spacing: 20rpx;
        background-color: #c00000;
      }

    }


  }
</style>
